<!doctype html>
<html>
<head>
    <title>nova UI Examples</title>

    <style>
        html, body, ul {
            margin: 0;
            padding: 0;
        }

        a {
            color: #a2441c;
        }

        a:hover {
            color: #ef652a;
        }

        html {
            font: 75% arial,helvetica,sans-serif;
        }

        #page {
            background: #fff;
            margin: 0 auto;
            padding: 1em 3em;
        }

        ul {
            list-style-type: none;
            padding-left: 2em;
        }

        li {
            padding: .2em 0;
        }
    </style>
</head>
<body>
    <div id="page">
    
        <h1>Framework</h1>

        <ul>
        
            <li>
                <h2>DataSource</h2>
                <ul>
                
                    <li><a href='demo/datasource/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/datasource/remote-data.html'>Binding to remote data</a></li>
                
                    <li><a href='demo/datasource/xml-data.html'>Binding to XML</a></li>
                
                    <li><a href='demo/datasource/remote-operations.html'>Remote data operations</a></li>
                
                    <li><a href='demo/datasource/local-operations.html'>Local data operations</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Templates</h2>
                <ul>
                
                    <li><a href='demo/templates/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/templates/expressions.html'>Expressions</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Drag & Drop</h2>
                <ul>
                
                    <li><a href='demo/dragdrop/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/dragdrop/events.html'>Events</a></li>
                
                </ul>

            </li>
        
        </ul>
    
        <h1>Widgets</h1>

        <ul>
        
            <li>
                <h2>Overview</h2>
                <ul>
                
                    <li><a href='demo/overview/index.html'>First look</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>AutoComplete</h2>
                <ul>
                
                    <li><a href='demo/autocomplete/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/autocomplete/remotedatasource.html'>Binding to remote data</a></li>
                
                    <li><a href='demo/autocomplete/template.html'>Customizing templates</a></li>
                
                    <li><a href='demo/autocomplete/events.html'>Events</a></li>
                
                    <li><a href='demo/autocomplete/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Calendar</h2>
                <ul>
                
                    <li><a href='demo/calendar/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/calendar/template.html'>Customizing templates</a></li>
                
                    <li><a href='demo/calendar/events.html'>Events</a></li>
                
                    <li><a href='demo/calendar/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Chart</h2>
                <ul>
                
                    <li><a href='demo/chart/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/chart/pie-chart.html'>Pie Chart</a></li>
                
                    <li><a href='demo/chart/local-data.html'>Binding to local data</a></li>
                
                    <li><a href='demo/chart/remote-data.html'>Binding to remote data</a></li>
                
                    <li><a href='demo/chart/events.html'>Events</a></li>
                
                    <li><a href='demo/chart/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>ComboBox</h2>
                <ul>
                
                    <li><a href='demo/combobox/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/combobox/remotedatasource.html'>Binding to remote data</a></li>
                
                    <li><a href='demo/combobox/template.html'>Customizing templates</a></li>
                
                    <li><a href='demo/combobox/events.html'>Events</a></li>
                
                    <li><a href='demo/combobox/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>DatePicker</h2>
                <ul>
                
                    <li><a href='demo/datepicker/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/datepicker/monthpicker.html'>Month picker</a></li>
                
                    <li><a href='demo/datepicker/rangeselection.html'>Range selection</a></li>
                
                    <li><a href='demo/datepicker/events.html'>Events</a></li>
                
                    <li><a href='demo/datepicker/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>DropDownList</h2>
                <ul>
                
                    <li><a href='demo/dropdownlist/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/dropdownlist/remotedatasource.html'>Binding to remote data</a></li>
                
                    <li><a href='demo/dropdownlist/template.html'>Customizing templates</a></li>
                
                    <li><a href='demo/dropdownlist/events.html'>Events</a></li>
                
                    <li><a href='demo/dropdownlist/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Grid</h2>
                <ul>
                
                    <li><a href='demo/grid/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/grid/from-table.html'>Initialization from table</a></li>
                
                    <li><a href='demo/grid/local-data.html'>Binding to local data</a></li>
                
                    <li><a href='demo/grid/remote-data.html'>Binding to remote data</a></li>
                
                    <li><a href='demo/grid/virtualization-local-data.html'>Virtualization of local data</a></li>
                
                    <li><a href='demo/grid/virtualization-remote-data.html'>Virtualization of remote data</a></li>
                
                    <li><a href='demo/grid/sorting.html'>Sorting</a></li>
                
                    <li><a href='demo/grid/selection.html'>Selection</a></li>
                
                    <li><a href='demo/grid/rowtemplate.html'>Row template</a></li>
                
                    <li><a href='demo/grid/events.html'>Events</a></li>
                
                    <li><a href='demo/grid/api.html'>API</a></li>
                    <li><a href='demo/grid/flexigrid.html'>flexigrid</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Menu</h2>
                <ul>
                
                    <li><a href='demo/menu/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/menu/animation.html'>Animation effects</a></li>
                
                    <li><a href='demo/menu/events.html'>Events</a></li>
                
                    <li><a href='demo/menu/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>PanelBar</h2>
                <ul>
                
                    <li><a href='demo/panelbar/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/panelbar/ajax.html'>Loading content with AJAX</a></li>
                
                    <li><a href='demo/panelbar/animation.html'>Animation effects</a></li>
                
                    <li><a href='demo/panelbar/events.html'>Events</a></li>
                
                    <li><a href='demo/panelbar/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Slider</h2>
                <ul>
                
                    <li><a href='demo/slider/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/slider/events.html'>Events</a></li>
                
                    <li><a href='demo/slider/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Splitter</h2>
                <ul>
                
                    <li><a href='demo/splitter/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/splitter/ajax.html'>Loading content with AJAX</a></li>
                
                    <li><a href='demo/splitter/events.html'>Events</a></li>
                
                    <li><a href='demo/splitter/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>TabStrip</h2>
                <ul>
                
                    <li><a href='demo/tabstrip/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/tabstrip/ajax.html'>Loading content with AJAX</a></li>
                
                    <li><a href='demo/tabstrip/animation.html'>Animation effects</a></li>
                
                    <li><a href='demo/tabstrip/events.html'>Events</a></li>
                
                    <li><a href='demo/tabstrip/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>TreeView</h2>
                <ul>
                
                    <li><a href='demo/treeview/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/treeview/dragdrop.html'>Drag & drop</a></li>
                
                    <li><a href='demo/treeview/events.html'>Events</a></li>
                
                    <li><a href='demo/treeview/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Upload</h2>
                <ul>
                
                    <li><a href='demo/upload/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/upload/async.html'>Asynchronous Upload</a></li>
                
                    <li><a href='demo/upload/events.html'>Events</a></li>
                
                    <li><a href='demo/upload/api.html'>API</a></li>
                
                </ul>

            </li>
        
            <li>
                <h2>Window</h2>
                <ul>
                
                    <li><a href='demo/window/index.html'>Basic usage</a></li>
                
                    <li><a href='demo/window/ajax.html'>Loading content with AJAX</a></li>
                
                    <li><a href='demo/window/events.html'>Events</a></li>
                
                    <li><a href='demo/window/api.html'>API</a></li>
                
                </ul>

            </li>
        
        </ul>
    
        <h1>Integration</h1>

        <ul>
        
            <li>
                <h2>Integration</h2>
                <ul>
                
                    <li><a href='demo/integration/index.html'>Using KnockoutJS with nova</a></li>
                
                    <li><a href='demo/integration/jquery-templates.html'>Using jQuery templates with nova</a></li>
                
                </ul>

            </li>
        
        </ul>
    
    </div>
</body>
</html>
